<script setup lang="ts">
// This starter template is using Vue 3 <script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Menu, Layout, Avatar, Badge, Drawer, Button, Tooltip } from '@arco-design/web-vue';

const router = useRouter();
const route = useRoute();

// 状态管理
const isCollapsed = ref(false);
const showMobileMenu = ref(false);
const currentUser = ref('');
const unreadNotifications = ref(3);

// 菜单项配置
const menuItems = [
  {
    key: '/dashboard',
    icon: 'home',
    label: '仪表盘',
    title: '查看财务概览'
  },
  {
    key: '/transactions',
    icon: 'list',
    label: '交易记录',
    title: '管理收入和支出'
  },
  {
    key: '/categories',
    icon: 'tags',
    label: '分类管理',
    title: '管理收入和支出分类'
  },
  {
    key: '/reports',
    icon: 'bar-chart',
    label: '财务报表',
    title: '查看详细财务分析'
  },
  {
    key: '/settings',
    icon: 'settings',
    label: '系统设置',
    title: '配置系统参数'
  }
];

// 计算当前激活的菜单项
const currentMenuItem = computed(() => {
  return route.path;
});

// 计算侧边栏宽度
const sidebarWidth = computed(() => {
  return isCollapsed.value ? '64px' : '240px';
});

// 方法：切换侧边栏折叠状态
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
};

// 方法：切换移动端菜单
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value;
};

// 方法：处理菜单点击
const handleMenuClick = (key: string) => {
  router.push(key);
  if (window.innerWidth < 768) {
    showMobileMenu.value = false;
  }
};

// 方法：处理通知点击
const handleNotificationClick = () => {
  unreadNotifications.value = 0;
  // 这里可以添加通知列表的逻辑
};

// 方法：加载用户信息
const loadUserInfo = () => {
  const settings = localStorage.getItem('basicSettings');
  if (settings) {
    const { username } = JSON.parse(settings);
    currentUser.value = username || '用户';
  } else {
    currentUser.value = '用户';
  }
};

// 响应式处理
const handleResize = () => {
  if (window.innerWidth >= 768) {
    showMobileMenu.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  loadUserInfo();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<template>
  <Layout class="app-layout">
    <!-- 侧边栏导航 (桌面版) -->
    <Layout.Sider 
      :width="sidebarWidth" 
      :collapsed-width="64" 
      class="sidebar" 
      theme="dark" 
      breakpoint="lg"
      collapsible
      v-model:collapsed="isCollapsed"
      :style="{ width: sidebarWidth }"
    >
      <div class="sidebar-header">
        <h1 v-if="!isCollapsed" class="app-title">Sana Finance</h1>
        <h1 v-else class="app-title-collapsed">SF</h1>
      </div>
      <Menu 
        :selected-keys="[currentMenuItem]"
        mode="vertical"
        class="sidebar-menu"
        @click="handleMenuClick"
      >
        <Menu.Item 
          v-for="item in menuItems" 
          :key="item.key"
          :title="item.title"
        >
          <template #icon>
            <div class="menu-icon">
              <span :class="['iconfont', `icon-${item.icon}`]"></span>
            </div>
          </template>
          <span v-if="!isCollapsed" class="menu-label">{{ item.label }}</span>
        </Menu.Item>
      </Menu>
    </Layout.Sider>

    <!-- 主内容区域 -->
    <Layout class="main-layout">
      <!-- 顶部导航栏 -->
      <Layout.Header class="header">
        <div class="header-left">
          <Button 
            type="text" 
            icon="menu-unfold"
            @click="toggleMobileMenu"
            class="mobile-menu-button"
          >
          </Button>
          <Button 
            type="text" 
            :icon="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            @click="toggleSidebar"
            class="toggle-sidebar-button"
          >
          </Button>
          <h2 class="page-title">{{ menuItems.find(item => item.key === currentMenuItem)?.label || 'Sana Finance' }}</h2>
        </div>
        <div class="header-right">
          <!-- 通知按钮 -->
          <Tooltip content="通知">
            <Button 
              type="text" 
              class="notification-button"
              @click="handleNotificationClick"
            >
              <Badge :count="unreadNotifications" :show-zero="false">
                <span class="iconfont icon-bell"></span>
              </Badge>
            </Button>
          </Tooltip>
          
          <!-- 用户头像 -->
          <Tooltip :content="currentUser">
            <Avatar class="user-avatar" size="large">
              <span class="iconfont icon-user"></span>
            </Avatar>
          </Tooltip>
        </div>
      </Layout.Header>

      <!-- 主内容容器 -->
      <Layout.Content class="content">
        <router-view />
      </Layout.Content>
    </Layout>

    <!-- 移动端侧边栏抽屉 -->
    <Drawer 
      v-model:visible="showMobileMenu" 
      placement="left" 
      class="mobile-menu-drawer"
      @click-close="toggleMobileMenu"
    >
      <div class="mobile-menu-content">
        <div class="sidebar-header mobile">
          <h1 class="app-title">Sana Finance</h1>
        </div>
        <Menu 
          :selected-keys="[currentMenuItem]"
          mode="vertical"
          class="mobile-menu"
          @click="handleMenuClick"
        >
          <Menu.Item 
            v-for="item in menuItems" 
            :key="item.key"
          >
            <template #icon>
              <div class="menu-icon">
                {{ item.icon }}
              </div>
            </template>
            <span class="menu-label">{{ item.label }}</span>
          </Menu.Item>
        </Menu>
      </div>
    </Drawer>
  </Layout>
</template>

<style scoped>
/* 应用布局 */
.app-layout {
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  background-color: var(--color-bg-3);
  border-right: 1px solid var(--color-border);
  transition: width 0.3s ease;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border);
}

.app-title {
  color: var(--color-text-1);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.app-title-collapsed {
  color: var(--color-text-1);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.sidebar-menu {
  padding: 16px 0;
}

.menu-icon {
  color: var(--color-text-2);
}

.menu-label {
  font-size: 14px;
  color: var(--color-text-1);
}

/* 主布局样式 */
.main-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* 顶部导航栏样式 */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  background-color: var(--color-bg-1);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  color: var(--color-text-1);
}

.toggle-sidebar-button {
  display: none;
}

.mobile-menu-button {
  display: none;
}

.notification-button {
  color: var(--color-text-2);
}

.user-avatar {
  cursor: pointer;
  background-color: var(--color-primary);
  color: white;
}

/* 主内容区域样式 */
.content {
  flex: 1;
  overflow: auto;
  padding: 0;
  background-color: var(--color-bg-1);
}

/* 移动端菜单样式 */
.mobile-menu-drawer {
  width: 240px !important;
}

.mobile-menu-content {
  height: 100%;
  background-color: var(--color-bg-3);
}

.mobile-menu {
  padding: 16px 0;
}

.mobile .sidebar-header {
  justify-content: flex-start;
  padding: 16px 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .toggle-sidebar-button {
    display: none;
  }
  
  .mobile-menu-button {
    display: block;
  }
  
  .page-title {
    font-size: 16px;
  }
  
  .sidebar {
    display: none;
  }
  
  .header {
    padding: 0 16px;
  }
}

@media (min-width: 769px) {
  .mobile-menu-drawer {
    display: none !important;
  }
}

/* 主题适配 */
:deep(.arco-layout-header) {
  background-color: var(--color-bg-1);
  border-bottom: 1px solid var(--color-border);
}

:deep(.arco-layout-sider) {
  background-color: var(--color-bg-3);
}

:deep(.arco-menu-vertical .arco-menu-item-active:not(.arco-menu-item-disabled)) {
  background-color: var(--color-primary-light-1);
}

:deep(.arco-menu-vertical .arco-menu-item-active:not(.arco-menu-item-disabled) .arco-menu-item-icon, 
.arco-menu-vertical .arco-menu-item-active:not(.arco-menu-item-disabled) .arco-menu-item-content) {
  color: var(--color-primary);
}

:deep(.arco-badge-dot) {
  background-color: var(--color-danger);
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.content::-webkit-scrollbar-track {
  background: var(--color-bg-1);
}

.content::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.content::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-3);
}
</style>
